<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        v-cloak指令的作用是vue示例渲染后关联结束
        双大括号插值语法在遇到网络延迟的时候会显示编译之前的文本

        [v-cloak]css选择器选择的是html结构中有v-cloak的属性，有这个属性的元素设置display为none，
        又由于v-cloak这个属性在vue的实例加载完之后关联结束，所以就需要了这个元素的隐藏状态
        */
        [v-clock]{
            /*隐藏*/
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
        我是渲染的指令-v-cloak: {{a}}
        <p></p>
        <button @click="add">按我加1</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:0
            },
            // 事件方法
            methods:{
                add() {
                    this.a ++
                    console.log(this.a)
                }
            }
        })
    </script>
</body>
</html>